<template>
  <div class="icon_display">
    <div class="icon_list_item" v-for="(item, index) in 1" :key="index">
      <div class="icons_title">图标库</div>
      <div class="icon_items">
        <div class="icon_item" v-for="(iconItem, iconIndex) in iconData" :key="'icon' + iconIndex">
          <i :class="['iconfont', iconItem]" @click="handleClickIcon(iconItem)"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted } from 'vue'
import { useStore } from 'vuex'
export default defineComponent({
  setup(props, context) {
    const store = useStore()
    const iconData = computed(() => store.state.iconList)
    const handleClickIcon = (icon: string) => {
      context.emit('clickIcon', icon)
    }
    onMounted(() => {
      if(store.state.iconList.length === 0) {
        store.dispatch('fetchIconList')
      }
    })
    return {
      iconData,
      handleClickIcon
    }
  }
})
</script>

<style scoped>
  .icons_title {
    text-align: start;
    height: 50px;
    line-height: 50px;
    color: #333;
  }
  .icon_items {
    display: flex;
    flex-wrap: wrap;
  }
  .icon_item {
    font-size: 24px;
    height: 50px;
    width: 50px;
    line-height: 50px;
    border-radius: 50%;
    background-color: #fff;
    margin: 12px 4px;
    color: #F9C3C2;
  }
  .icon_item:active {
    color: #fff;
    background-color: #F9C3C2;
  }
</style>